import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue';
import { useEditorStore } from '@/store';
import * as monaco from 'monaco-editor'
import $style from './index.module.scss';

export default defineComponent({
    setup(){
        const store = useEditorStore();
        const editorRef = ref(null);

        // onMounted(()=>{
        //     /* 创建编辑器实例 */
        //     const editor = monaco.editor.create(editorRef.value, {
        //         /* 主题颜色 */
        //         theme: 'vs',
        //         /* 语言 */
        //         language: 'sql',
        //         /* 是否只读 */
        //         readOnly: false,
        //         /* 初始值 */
        //         value: '',
        //         /* 自动布局 */
        //         automaticLayout: true,
        //         /* 阻止编辑器滚动到最后一行之外 */
        //         scrollBeyondLastLine: true
        //     });

        //     /* 同步到 pinia */
        //     store.editor = editor;
        //     store.editorRef = editorRef;
        // });

        // onBeforeUnmount(()=>{
        //     /* 销毁编辑器实例 */
        //     store.editor?.dispose();
        //     /* 重置 store */
        //     // store.$reset();
        // });

        return ()=>(<div class={$style.editor} ref={editorRef}></div>);
    }
});